<template lang="jade">
    div(class="product-list clearfix")
        loading(:visible="loading")
        product-search(v-model="filter",@do-search="get_product_list")
        el-form(:inline="true",class="operations")
            el-form-item
                el-checkbox(@change="checkAll") 全选
                button(class="btn btn-danger btn-sm",type="button",@click="batch_remove") 
                    i(class="el-icon-delete") 批量删除
                router-link(class="btn btn-primary btn-sm",to="/product") 
                    i(class="el-icon-plus") 新建产品
                
        div(class="panel panel-default",v-for="product in paged.items") 
            div(class="panel-heading")
                el-checkbox(v-model="product.checked",@change="on_product_check_change(product)")
                span(class="product-title") {{product.name}}
                
                div(class="pull-right")
                    div(class="dropdown")
                        a(href="javascript:void(0);",
                          class="text-muted dropdown-toggle",
                          data-toggle="dropdown")
                            i(class="glyphicon glyphicon-option-vertical")
                        ul(class="dropdown-menu")
                            li
                                router-link(:to="'/product/'+product.id")
                                    i(class="el-icon-edit text-primary") 编辑
                                a(href="javascript:void(0);",@click="remove(product)") 
                                    i(class="el-icon-delete text-danger") 删除
                div(class="pull-right warehousing-actions")
                    a(href="javascript:void(0);",@click="toOutbound(product)")
                        i(class="el-icon-sold-out") 快速出库
                    a(href="javascript:void(0);",@click="toWarehousing(product)")
                        i(class="el-icon-goods") 快速入库
            div(class="panel-body")
                div(class="product-sku-container")
                    product-sku-list(v-model="product.productSkuList",to-history)
        div(class="pull-right")
            common-pagination(v-model="page", :total="paged.totalCount",@change="get_product_list")
        warehousing-order(:visible="warehousingVisible",
                          @close="warehousingVisible=false",
                          v-model="warehousingProduct")
        outbound-order(:visible="outboundVisible",
                       @close="outboundVisible=false",
                       v-model="outboundProduct")
            
</template>
<script>
    import _ from 'lodash';
    import Collection  from 'collection';
    import Sku from '../models/sku';
    import axios from 'axios';
    import SkuList from './sku-list';
    import Loading from './loading';
    import WarehousingOrder from './warehousing-order';
    import OutboundOrder from './outbound-order';
    import ProductSerach from './product-search';
    import SkuElementView from './sku-element.vue';
    import ProductSkuListView from './product-sku-list.vue';
    import ElCommonPagination from './el-common-pagination';
    import {request} from 'collection';

    export default {
        data() {
            return {
                products:[],
                simpleSearch: true,
                paged:{},
                filter: {
                    productName: null,
                    maxPrice: null,
                    minPrice: null,
                    remark: null,
                },

                currentPage:1,

                page: {
                    maxResultCount:10,
                    skipCount:0
                },
                loading:false,
                warehousingVisible: false,
                warehousingProduct: null,
                outboundVisible: false,
                outboundProduct: null
            }
        },

        model:{
            prop: 'skuList',
            event: 'update'
        },

        components: {
            'sku-list': SkuList,
            'loading': Loading,
            'warehousing-order': WarehousingOrder,
            'outbound-order': OutboundOrder,
            'product-search': ProductSerach,
            'sku-element-view':SkuElementView,
            'product-sku-list':ProductSkuListView,
            'common-pagination':ElCommonPagination,
        },

        methods: {
            get_product_list(){
                var vm = this;

                var params = _.extend({}, this.filter, this.page);
                request.get.call(this, '/api/services/app/productQs/GetProductList', params).then((res)=>{
                     _.each(res.data.result.items,function(item){
                        item.checked=false;
                        _.each(item.skuList, function(sku){
                            sku.checked = false;
                        });
                    });
                    vm.paged = res.data.result;
                });
            },

            toWarehousing(product){
                this.warehousingProduct = product;
                this.warehousingVisible = true;
            },
            toOutbound(product){
                this.outboundProduct = product;
                this.outboundVisible = true;
            },
            checkAll(val){
                _.each(this.paged.items, function(item){
                    item.checked=val;
                });
            },

            remove(product){
                var vm = this;
                this.comfirn('此操作将删除该产品，继续吗？',()=> {
                    vm.loading=true;
                    axios({
                        method:'delete',
                        url:'/api/services/app/product/Remove' + this.buildQueryString([product.id], 'productIdList'),
                    }).then(function(){
                        vm.loading=false;
                        vm.$message({type:'success',message:'删除成功'});
                        vm.get_product_list();
                    });
                });
            },

            batch_remove(){
                var vm = this;
                
                var checkedProductList = _.filter(vm.paged.items, function(item){return item.checked});
                var checkedProductIdList = _.map(checkedProductList,function(item){return item.id});
    
                if(checkedProductIdList.length==0){
                    vm.$message({type:'warning',message:'请勾选要删除的产品'});
                    return;                    
                }

                this.comfirn('该操作将删除选中的产品，继续吗?', ()=>{
                    vm.loading=true;
                    axios({
                        method:'delete',
                        url:'/api/services/app/product/Remove' + vm.buildQueryString(checkedProductIdList, 'productIdList'),
                    }).then(function(){
                        vm.loading=false;
                        vm.$message({type:'success',message:'删除成功'});
                        vm.get_product_list();
                    });
                });
                
            },
            buildQueryString(array,paramName){
                var items = _.map(array, function(item,index){
                    return  paramName + '['+index+']='+item;
                });
                return '?' + items.join('&');
            },
            on_product_check_change(product){
                _.each(product.skuList, function(sku){
                    sku.checked = product.checked;
                });
            },
            comfirn(message,action){
                this.$confirm(message, '请确认', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    center: true
                }).then(() => {
                    action();
                }).catch(()=>{});
            }

        },

        created(){
            this.get_product_list();
        }
    }
</script>
<style lang="scss">
    body{
        background-color: #eaeaea;
    }
    .product-list{
        background: white;
        padding: 10px;
    }
    .product-list .search-bar{
        padding: 15px 15px 0 15px;
        border: 1px solid #eaeaea;
        margin-bottom: 20px;
    }
    .product-list .search .form-group{
        margin: 0 5px;
    }

    .product-list .product-title{
        margin-left: 10px;
    }

    .product-list .operations .el-checkbox{
        margin-left: 15px;
    }
    .product-list .operations button{
        margin: 0 5px;
    }
    .warehousing-actions a{
        margin-right: 10px;
    }
    .product-sku-container{
        margin: -15px;
    }
    .product-sku-container table{
        border:0px;
        margin-bottom: 0px;
    }
    
    .product-sku-container table thead tr th{
        border-bottom: 0px;
    }
    .product-sku-container table tbody tr:last-child td{
        border-bottom: 0px;
    }
    .product-sku-container table tr td:first-child,
    .product-sku-container table tr th:first-child{
        border-left: 0px;
    }
    .product-sku-container table tr td:last-child,
    .product-sku-container table tr th:last-child{
        border-right: 0px;
    }
    
</style>

